<template>
	<view class="content">
		<scroll-view class="scroll-box" scroll-y="">
			<view v-if="dataPool.length == 0" class="noClass">
				<text>您还没有加入班级</text>
			</view>
			<navigator hover-class="none" :url="'subjectlist?groupid='+item.groupid+'&student_id='+student_id" class="box" v-for="(item, index) in dataPool" :key="index">
				<view class="box-cont">
					<view class="class_item_left">
						<i class="iconfont iconbanji11"></i>
					</view>
					<view class="center-cont">
						<view class="center-cont-item1">{{item.group_name}}</view>
						<view class="center-cont-item2">
							<text>{{item.nicheng}}</text>
							<text style="margin-left: 30upx;">{{item.count_num}}人</text>
						</view>
					</view>
					<i class="iconfont iconjiantou font-styll"></i>
				</view>
			</navigator>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataPool: [],
				student_id:''
			};
		},
		onLoad(e) {
			this.student_id = e.student_id;
		},
		onShow() {
			this.getGroupList()
		},
		methods: {
			getGroupList() {
				let data = {
					group_type: 1,
					student_id:this.student_id
				}
				this.$zapi.apiPost('user/Grade.User/GradeList',data).then((res) => {
					if(res.data.code !== 200) { return }
					this.dataPool = res.data.data
				})
			}
		}
	};
</script>

<style scoped>
	.content {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;
	}
	.scroll-box {
		height: 100%;
	}
	.noClass{
		width: 750upx;
		text-align: center;
		font-size: 36upx;
		margin-top: 400upx;
		color: #999999;
	}
	.content_list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20upx;
		height: 120upx;
		background-color: #FFFFFF;
		border: 1px solid #f3f3f3;
	}
	.con_list_content {
		display: flex;
		align-items: center;
		margin-left: 30upx;
	}
	.con_list_avar {
		width: 75upx;
		height: 75upx;
		border-radius: 75upx;
	}
	.avar_img {
		width: 75upx;
	}
	.con_list_name {
		margin-left: 29upx;
	}
	.con_list_sing {
		width: 26upx;
		height: 26upx;
		border-radius: 35upx;
		margin-right: 80upx;
	}
	.checkLi {
		background-color: #fe9900;
	}
	
	
	.box {
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		width: 690upx;
		height: 160upx;
		margin-top: 20upx;
		background-color: #ffffff;
		border-radius: 30upx;
	}
/* 	.box:nth-child(1) {
		margin-top: 0;
	} */
	.box-cont {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		width: 606upx;
	}
	.iconbanji11 {
		color: #FF9900;
		font-size: 110upx;
		line-height: 1;
		margin-top: -10upx;
	}
	
	.center-cont {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		width: 418upx;
		left: 1upx;
		height: 80upx;
	}
	.center-cont-item1 {
		color: #333333;
		font-size: 36upx;
	}
	.center-cont-item2 {
		color: #666666;
		font-size: 30upx;
	}
	.font-styll {
		font-size: 42upx;
		color: #999999;
	}
</style>
